<template>
<div>
    <headTop></headTop>
    <el-card>
        <searchView :formOptions="searchFormData" v-on:onSearch="searchHandle" />
       
            <el-col :span="3">
 <div>
       <div class="left-title">仓库名称</div>
              <ul
                class="infinite-list"
                v-infinite-scroll="load"
                style="overflow: auto"
              >
                <li
                  v-for="(item,index) in storeList"
                  :key="index"
        :class="selectedNum==index?'active':''"
                  @click="selectStore(index)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
            </el-col>
               <el-col :span="21">
 <div style="margin-top: 10px;margin-left: 10px">
            <el-table :data="storeData" border @selection-change="handleSelectionChange" style="width: 100%" ref="staffTable">
                <el-table-column v-if="isSelected" type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" width="50" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称" width="100" align="center"></el-table-column>
                                <el-table-column prop="productNo" label="产品编号"  align="center"></el-table-column>
                                <el-table-column prop="productDraw" label="产品图纸"  align="center"></el-table-column>
                                <el-table-column prop="productPic" label="产品照片" align="center"></el-table-column>
                                <el-table-column prop="storeName" label="仓库名称" width="120" align="center"></el-table-column>

                <el-table-column prop="number" label="库存数量" width="100" align="center"></el-table-column>
                <el-table-column prop="unit" label="单位" width="100" align="center"></el-table-column>

                <el-table-column prop="updateTime" label="操作时间" align="center"></el-table-column>

                <el-table-column prop="staffName" label="操作人" align="center"></el-table-column>

                  <el-table-column
            fixed="right"
            label="记录"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text"
                @click="editHandle(scope.row)"
              >出入记录</el-button>
           
            </template>
          </el-table-column>
            </el-table>
            <el-pagination class="page-bottom" :page-size="currentPageSize" layout="prev, pager, next, jumper, ->, total" :total="totalCount" :current-page.sync="currentPage" @current-change="currentPageChange">
            </el-pagination>
        </div>
            </el-col>
       
    </el-card>
    <el-dialog :title="isEdit ? '修改信息' : '添加客户'" :visible.sync="isAddShow" width="30%" :before-close="closehandle">
        <insert :dataForm="currentItem" ref="costForm" v-on:insertSuccess="insertSuccess"></insert>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closehandle">取 消</el-button>
            <el-button type="primary" @click="handleClick">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import search from "@/components/searchView";
import headTop from "@/components/headTop";
import atoast from "@/components/AToast";
import searchView from "@/components/searchView";
import insert from "./insert.vue";
import {
    formatDate
} from "@/utils/mUtils";

import {
    getStoreSaveList,
    deleteStoreSave,
    getStoreList
} from "@/api/getData";
import moment from "moment";
export default {
    inject: ["reload"],
    data() {
        return {
            direction: "rtl",
            storeData: [],
            storeList:[],
            totalCount: 0,
            currentPage: 0,
            currentPageSize: 10,
            pageCount: 1,
            currentItem: {},
            isAddShow: false,
            isEdit: false,
            isSelected: false,
            isDeleteEnable: false,
            multiSelectes: [],
            searchFormData: [{
                    label: "产品名称",
                    prop: "productName",
                    element: "el-input",
                },
                {
                    label: "工艺名称",
                    prop: "techName",
                    element: "el-input",
                }
            ],
                  selectedNum:0,

        };
    },
    created() {},
    mounted() {
        this.getList();
        getStoreList().then((res)=>{
            if (res.code == 200) {
                this.storeList = res.data.list;
            }
        })
    },

    components: {
        search,
        headTop,
        insert,
        atoast,
        searchView,
    },
    methods: {
        dateFormat: function (row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return "";
            }
            return moment(date).format("YYYY-MM-DD");
        },
        selecetMutily() {
            this.isSelected = !this.isSelected;
            this.$refs.staffTable.clearSelection();
        },
        handleSelectionChange(val) {
            this.isDeleteEnable = val.length;
            this.multiSelectes = val;
        },
        deleteMutily() {
            var ids = [];
            this.multiSelectes.forEach((element) => {
                ids.push(element.id);
            });
            var idPas = ids.join(",");
            if (!idPas.length) {
                return;
            }
            this.$confirm("批量删除已选择, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    this.removeCost(idPas);
                    this.isSelected = false;
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消删除",
                    });
                });
        },
        searchHandle(data) {
          this.getList(data);
        },
        async getList(data = null) {
            try {
                var params = {};
                if (data != null) {
                    params = data;
                }
                params["page"] = this.currentPage;
                params["pageSize"] = 10;
                const result = await getStoreSaveList(params);
                if (result.code == 200) {
                    var rlist = result.data.list;
                    rlist.forEach(element => {
                      element['price'] = element['price']/1000;
                    });
                    this.storeData = rlist;
                    this.totalCount = result.data.total;
                    this.currentPageSize = result.data.page_size;
                    this.pageCount = result.data.pages;
                    this.currentPage = result.data.current_page;
                }
            } catch (error) {}
        },

        handleClick() {
            this.isAddShow = false;
            if (this.isEdit) {
                this.$refs.costForm.onUpdate();
            } else {
                this.$refs.costForm.onInsert();
            }
        },
        closehandle(data) {
            this.currentItem = Object.assign({}, data);
            this.$refs["costForm"].resetFields();
            this.isAddShow = false;
        },
        currentPageChange(val) {
            this.currentPage = val;
            this.getList();
        },
        insertSuccess() {
            this.currentItem = Object.assign({}, {});
            this.$refs["costForm"].resetFields();
            this.isAddShow = false;
            this.getList();
        },

        deleteHandle(data) {
            this.$confirm("删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                  debugger
                    this.removeCost(data.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        editHandle(data) {
            this.isEdit = true;
            this.isAddShow = true;
            let c = JSON.parse(JSON.stringify(data));
            this.currentItem = c;
            console.log(c);
        },
        addNewCost() {
            this.isAddShow = true;
            this.isEdit = false;
        },
        async removeCost(data) {
            try {
                let params = {
                    id: data,
                };
                console.log(params);
                const result = await deleteStoreSave(params);
                if (result.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                    this.getList();
                }
            } catch (error) {
                this.$message({
                    type: "error",
                    message: "删除失败!",
                });
            }
        },
        selectStore(i) {
     if (this.selectedNum === i) {
        this.selectedNum = -1; //取消选中
      } else {
        this.selectedNum = i;
      }
      this.selectName = this.count[i].title;
    },
    },
};
</script>

<style lang="less">
@import "../../style/normal.less";

.buttons-content {
    margin: 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.page-bottom {
    margin: 10px;
}

.infinite-list {
  height: 400px;
   li:hover {
      background-color: #409EFF;
      color: #fff;
  }
  li {
    text-align: center;
    background-color: #f4f4f4;
    padding: 5px;
    margin: 5px;
    font-size: 14px;

}
.active {
  background: #409EFF;
  border: #409EFF;
  color: #fff;
}
}
.left-title {
    background-color: #67C23A;
    color: #fff;
    font-size: 14px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin: 10px 5px 5px 5px;
}
</style>
